<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS滑动门技术</title>
<style type="text/css">
body,ul,li{ padding:0; margin:0 ; list-style:none;}
.all{
	width:1200px;
	margin:20px auto;
	height:56px;
	line-height:56px;
}
.all li{ float:left; }
.all a,.all span{
	display:inline-block;
	height:56px;
	float:left;                              /*设置li中的3个盒子左浮动*/
}
.one{                  
	width:22px;
	background:url(images/left.png);         /*定义左圆角背景图像*/
}
.two{
	width:22px;
	background:url(images/right.png);     /*定义右圆角背景图像*/
}
.all a:link,.all a:visited{  
	color:#FFF;
	font-size:18px;
	font-weight:bold;
	font-style:"微软雅黑";
	text-shadow:3px 3px 5px #333;
	text-decoration:none;
	background:url(images/middle.png) repeat-x;  /*定义中间的渐变背景*/
	padding:0 20px;
}
.all a:hover{
	color:#333;
	text-shadow:3px -3px 5px #FFF;
}
</style>
</head>
<body>
<ul class="all">
	<li>
    	    <span class="one"></span><a href="#">首页</a><span class="two"></span>
    </li>
	<li>
    	    <span class="one"></span><a href="#">公司产品</a><span class="two"></span>
    </li>
	<li>
         <span class="one"></span><a href="#">就业指导信息</a><span class="two"></span>
    </li>
	<li>
    	    <span class="one"></span><a href="#">留言簿</a><span class="two"></span>
    </li>
	<li>
    	    <span class="one"></span><a href="#">添加友情链接</a><span class="two"></span>
    </li>
</ul>
</body>
</html>
